<template>
    <div class="container">
        <!-- 顶部区域 -->
        <div class="header">
            <div class="app-info">
                <div class="app-logo">
                    <span>诗</span>
                </div>
                <div>
                    <h1 class="app-name">诗韵雅集</h1>
                    <p class="app-desc">品味千年文化，传承诗词之美</p>
                </div>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索古诗、诗人、朝代...">
            </div>
        </div>
        
        <!-- 功能区 -->
        <div class="feature-section">
            <div class="feature-item">
                <div class="feature-icon">📚</div>
                <div class="feature-name">品鉴</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🎵</div>
                <div class="feature-name">朗读</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">📖</div>
                <div class="feature-name">学习</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🏆</div>
                <div class="feature-name">挑战</div>
            </div>
        </div>
        
        <!-- 广告横幅 -->
        <div class="ad-banner">
            <div class="ad-badge">推荐</div>
            <div class="ad-close">×</div>
            <div class="ad-content">
                <div class="ad-image">诗词大会<br>火热报名</div>
                <div class="ad-text">
                    <div class="ad-title">第二届线上诗词大会</div>
                    <div class="ad-desc">与万千诗友同台竞技，赢取丰厚奖励</div>
                    <button class="ad-button">立即参与</button>
                </div>
            </div>
        </div>
        
        <!-- 每日推荐 -->
        <div class="daily-recommend">
            <div class="section-title">
                今日推荐
                <span>更多 ></span>
            </div>
            
            <div class="poem-card">
                <div class="poem-title">静夜思</div>
                <div class="poem-author">唐代 · 李白</div>
                <div class="poem-content">
                    床前明月光，疑是地上霜。<br>
                    举头望明月，低头思故乡。
                </div>
                <div class="poem-actions">
                    <div class="action-btn"><i>❤</i> 收藏</div>
                    <div class="action-btn"><i>🔊</i> 朗读</div>
                    <div class="action-btn"><i>📝</i> 笔记</div>
                </div>
            </div>
        </div>
        
        <!-- 热门诗人 -->
        <div class="poet-section">
            <div class="section-title">
                诗词大家
                <span>全部 ></span>
            </div>
            
            <div class="poet-list">
                <div class="poet-card">
                    <div class="poet-avatar">李白</div>
                    <div class="poet-name">李白</div>
                    <div class="poet-dynasty">唐代</div>
                </div>
                
                <div class="poet-card">
                    <div class="poet-avatar">杜甫</div>
                    <div class="poet-name">杜甫</div>
                    <div class="poet-dynasty">唐代</div>
                </div>
                
                <div class="poet-card">
                    <div class="poet-avatar">苏轼</div>
                    <div class="poet-name">苏轼</div>
                    <div class="poet-dynasty">宋代</div>
                </div>
                
                <div class="poet-card">
                    <div class="poet-avatar">清照</div>
                    <div class="poet-name">李清照</div>
                    <div class="poet-dynasty">宋代</div>
                </div>
                
                <div class="poet-card">
                    <div class="poet-avatar">居易</div>
                    <div class="poet-name">白居易</div>
                    <div class="poet-dynasty">唐代</div>
                </div>
            </div>
        </div>
        
        <!-- 底部广告区域 -->
        <div class="ad-large">
            <div class="ad-large-badge">限时优惠</div>
            <div class="ad-close">×</div>
            <div class="ad-large-title">诗韵雅集会员专享</div>
            <div class="ad-large-desc">解锁所有诗词解析、名家朗读和独家内容</div>
            <div class="ad-large-image">会员专属特权</div>
            <button class="ad-large-button">立即开通</button>
        </div>
        
        <!-- 诗词精选 -->
        <div class="daily-recommend">
            <div class="section-title">
                经典名篇
                <span>更多 ></span>
            </div>
            
            <div class="poem-card">
                <div class="poem-title">水调歌头·明月几时有</div>
                <div class="poem-author">宋代 · 苏轼</div>
                <div class="poem-content">
                    明月几时有？把酒问青天。<br>
                    不知天上宫阙，今夕是何年。<br>
                    我欲乘风归去，又恐琼楼玉宇...
                </div>
                <div class="poem-actions">
                    <div class="action-btn"><i>❤</i> 收藏</div>
                    <div class="action-btn"><i>🔊</i> 朗读</div>
                    <div class="action-btn"><i>📝</i> 笔记</div>
                </div>
            </div>
            
            <div class="poem-card">
                <div class="poem-title">春晓</div>
                <div class="poem-author">唐代 · 孟浩然</div>
                <div class="poem-content">
                    春眠不觉晓，处处闻啼鸟。<br>
                    夜来风雨声，花落知多少。
                </div>
                <div class="poem-actions">
                    <div class="action-btn"><i>❤</i> 收藏</div>
                    <div class="action-btn"><i>🔊</i> 朗读</div>
                    <div class="action-btn"><i>📝</i> 笔记</div>
                </div>
            </div>
        </div>
        

 
    </div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

 <style scoped lang="scss">
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         
         body {
             font-family: 'Noto Serif SC', serif;
             background: linear-gradient(to bottom, #f9f6ec, #e8dfce);
             color: #5c4f35;
             line-height: 1.6;
             padding: 0;
             margin: 0;
             min-height: 100vh;
         }
         
         .container {
             max-width: 414px;
             margin: 0 auto;
             background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect fill="%238e7d5b" width="100" height="100"/></svg>') repeat;
             min-height: 100vh;
             box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
             position: relative;
             overflow-x: hidden;
         }
         
         /* 顶部区域 */
         .header {
             background: linear-gradient(135deg, #6d5c43 0%, #8e7d5b 50%, #a39272 100%);
             color: white;
             padding: 25px 15px 15px;
             border-bottom-left-radius: 25px;
             border-bottom-right-radius: 25px;
             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
             position: relative;
             overflow: hidden;
             min-height: 180px;
         }
         
         /* 水墨山背景 */
         .header::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: 
                 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,70 C50,30 80,50 120,40 C160,30 180,50 200,60 L200,100 L0,100 Z" fill="rgba(0,0,0,0.1)"/></svg>') bottom left/60% 40% no-repeat,
                 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,80 C30,50 70,60 100,50 C140,40 160,60 200,70 L200,100 L0,100 Z" fill="rgba(0,0,0,0.15)"/></svg>') bottom left/80% 50% no-repeat,
                 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,90 C40,60 80,70 120,60 C150,50 170,70 200,80 L200,100 L0,100 Z" fill="rgba(0,0,0,0.2)"/></svg>') bottom left/100% 60% no-repeat;
             z-index: 1;
             opacity: 0.7;
         }
         
         .header::after {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 40px;
             background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="M0,0 C40,20 60,20 100,0 L100,20 L0,20 Z" fill="%23f9f6ec"/></svg>') center bottom / 100% 100% no-repeat;
             z-index: 2;
         }
         
         .app-info {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             position: relative;
             z-index: 3;
         }
         
         .app-logo {
             width: 50px;
             height: 50px;
             background: linear-gradient(135deg, #d4c5a8, #8e7d5b);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-right: 12px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
             border: 2px solid rgba(255, 255, 255, 0.3);
             position: relative;
             overflow: hidden;
         }
         
         .app-logo::after {
             content: "";
             position: absolute;
             width: 100%;
             height: 100%;
             background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><path d="M30,5 C40,5 50,10 55,20 C60,30 55,40 50,50 C40,55 30,55 20,50 C10,45 5,35 5,25 C5,15 15,5 30,5 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>') center/cover no-repeat;
         }
         
         .app-logo span {
             font-family: 'Ma Shan Zheng', cursive;
             font-size: 28px;
             color: white;
             text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
         }
         
         .app-name {
             font-family: 'Ma Shan Zheng', cursive;
             font-size: 32px;
             letter-spacing: 5px;
             text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
             margin-bottom: 3px;
         }
         
         .app-desc {
             font-size: 14px;
             opacity: 0.9;
             margin-top: 2px;
             letter-spacing: 1px;
         }
         
         .search-bar {
             background: rgba(255, 255, 255, 0.92);
             border-radius: 30px;
             padding: 12px 20px;
             display: flex;
             align-items: center;
             margin: 10px 0;
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
             position: relative;
             z-index: 3;
             border: 1px solid rgba(142, 125, 91, 0.2);
         }
         
         .search-bar input {
             flex: 1;
             border: none;
             background: transparent;
             padding: 5px;
             font-size: 16px;
             outline: none;
             color: #5c4f35;
         }
         
         .search-bar input::placeholder {
             color: #a89a7a;
         }
         
         /* 特色功能区 */
         .feature-section {
             padding: 20px 15px;
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 15px;
         }
         
         .feature-item {
             background: linear-gradient(to bottom, #f3efe5, #e8e1d0);
             border-radius: 15px;
             padding: 15px 10px;
             text-align: center;
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
             transition: all 0.3s ease;
             cursor: pointer;
             border: 1px solid rgba(142, 125, 91, 0.1);
         }
         
         .feature-item:hover {
             transform: translateY(-3px);
             box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
         }
         
         .feature-icon {
             font-size: 24px;
             margin-bottom: 8px;
             height: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         
         .feature-name {
             font-size: 14px;
             color: #5c4f35;
         }
         
         /* 每日推荐 */
         .daily-recommend {
             background: white;
             margin: 15px;
             border-radius: 18px;
             padding: 25px 20px;
             box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
             border: 1px solid rgba(142, 125, 91, 0.1);
             position: relative;
         }
         
         .section-title {
             font-size: 20px;
             color: #7a6a51;
             margin-bottom: 18px;
             padding-left: 12px;
             border-left: 4px solid #7a6a51;
             font-weight: bold;
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
         
         .section-title span {
             font-size: 14px;
             color: #a89a7a;
             font-weight: normal;
             cursor: pointer;
         }
         
         .poem-card {
             background: #faf8f1;
             border-radius: 15px;
             padding: 20px;
             margin-bottom: 20px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
             border: 1px solid #e8e1d0;
             position: relative;
             z-index: 1;
         }
         
         .poem-title {
             font-size: 22px;
             font-weight: bold;
             color: #5c4f35;
             margin-bottom: 10px;
             font-family: 'Ma Shan Zheng', cursive;
             text-align: center;
         }
         
         .poem-author {
             font-size: 16px;
             color: #8e7d5b;
             margin-bottom: 15px;
             text-align: center;
             font-style: italic;
         }
         
         .poem-content {
             font-size: 20px;
             line-height: 1.9;
             color: #5c4f35;
             margin-bottom: 15px;
             text-align: center;
             padding: 15px 0;
             font-family: 'Ma Shan Zheng', cursive;
             letter-spacing: 2px;
         }
         
         .poem-actions {
             display: flex;
             justify-content: space-around;
             border-top: 1px dashed #e8e1d0;
             padding-top: 15px;
         }
         
         .action-btn {
             display: flex;
             flex-direction: column;
             align-items: center;
             color: #8e7d5b;
             font-size: 14px;
             cursor: pointer;
             transition: all 0.2s;
             padding: 8px 15px;
             border-radius: 10px;
         }
         
         .action-btn i {
             font-size: 20px;
             margin-bottom: 5px;
         }
         
         .action-btn:hover {
             background: rgba(142, 125, 91, 0.1);
         }
         
         /* 广告区域 - 顶部横幅 */
         .ad-banner {
             margin: 15px;
             background: linear-gradient(to right, #f8f4e9, #f1ead8);
             border-radius: 15px;
             padding: 15px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
             border: 1px solid #e8e1d0;
             position: relative;
             overflow: hidden;
         }
         
         .ad-badge {
             position: absolute;
             top: 10px;
             right: 10px;
             background: #8e7d5b;
             color: white;
             font-size: 12px;
             padding: 3px 8px;
             border-radius: 10px;
         }
         
         .ad-content {
             display: flex;
             align-items: center;
         }
         
         .ad-image {
             width: 70px;
             height: 70px;
             background: linear-gradient(135deg, #d4c5a8, #a39272);
             border-radius: 10px;
             margin-right: 15px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
             font-size: 12px;
             text-align: center;
             padding: 5px;
         }
         
         .ad-text {
             flex: 1;
         }
         
         .ad-title {
             font-size: 16px;
             font-weight: bold;
             color: #5c4f35;
             margin-bottom: 5px;
         }
         
         .ad-desc {
             font-size: 13px;
             color: #8e7d5b;
             margin-bottom: 8px;
         }
         
         .ad-button {
             background: #8e7d5b;
             color: white;
             border: none;
             border-radius: 15px;
             padding: 5px 12px;
             font-size: 12px;
             cursor: pointer;
         }
         
         /* 热门诗人 */
         .poet-section {
             margin: 25px 15px;
         }
         
         .poet-list {
             display: flex;
             overflow-x: auto;
             gap: 15px;
             padding: 15px 5px;
             scrollbar-width: none;
         }
         
         .poet-list::-webkit-scrollbar {
             display: none;
         }
         
         .poet-card {
             flex: 0 0 auto;
             width: 110px;
             text-align: center;
             background: white;
             border-radius: 15px;
             padding: 15px 10px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
             transition: all 0.3s ease;
             cursor: pointer;
         }
         
         .poet-card:hover {
             transform: translateY(-3px);
             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
         }
         
         .poet-avatar {
             width: 70px;
             height: 70px;
             border-radius: 50%;
             background: linear-gradient(135deg, #e8e1d0, #c4b28d);
             margin: 0 auto 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 16px;
             color: #5c4f35;
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
             border: 2px solid white;
         }
         
         .poet-name {
             font-size: 16px;
             color: #5c4f35;
             font-weight: bold;
             margin-bottom: 5px;
         }
         
         .poet-dynasty {
             font-size: 13px;
             color: #8e7d5b;
             background: #f3efe5;
             padding: 3px 10px;
             border-radius: 10px;
             display: inline-block;
         }
         
         /* 底部广告区域 */
         .ad-large {
             margin: 25px 15px;
             background: linear-gradient(to right, #f8f4e9, #f1ead8);
             border-radius: 15px;
             padding: 20px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
             border: 1px solid #e8e1d0;
             text-align: center;
             position: relative;
         }
         
         .ad-large-badge {
             position: absolute;
             top: 10px;
             right: 10px;
             background: #8e7d5b;
             color: white;
             font-size: 12px;
             padding: 3px 8px;
             border-radius: 10px;
         }
         
         .ad-large-title {
             font-size: 18px;
             font-weight: bold;
             color: #5c4f35;
             margin-bottom: 10px;
         }
         
         .ad-large-desc {
             font-size: 14px;
             color: #8e7d5b;
             margin-bottom: 15px;
         }
         
         .ad-large-image {
             width: 100%;
             height: 100px;
             background: linear-gradient(135deg, #d4c5a8, #a39272);
             border-radius: 10px;
             margin-bottom: 15px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
         }
         
         .ad-large-button {
             background: #8e7d5b;
             color: white;
             border: none;
             border-radius: 20px;
             padding: 8px 25px;
             font-size: 14px;
             cursor: pointer;
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
         }
         
         /* 底部导航 */
         .bottom-nav {
             position: fixed;
             bottom: 0;
             width: 100%;
             max-width: 414px;
             display: flex;
             background: rgba(255, 255, 255, 0.95);
             box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
             z-index: 1000;
             border-top-left-radius: 25px;
             border-top-right-radius: 25px;
             overflow: hidden;
             backdrop-filter: blur(5px);
             border: 1px solid rgba(142, 125, 91, 0.1);
         }
         
         .nav-item {
             flex: 1;
             text-align: center;
             padding: 16px 0;
             font-size: 14px;
             color: #a89a7a;
             position: relative;
             transition: all 0.3s;
             cursor: pointer;
         }
         
         .nav-item.active {
             color: #7a6a51;
             font-weight: bold;
         }
         
         .nav-item.active::before {
             content: "";
             position: absolute;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 35px;
             height: 3px;
             background: linear-gradient(to right, #c4b28d, #8e7d5b);
             border-radius: 0 0 3px 3px;
         }
         
         /* 关闭广告按钮 */
         .ad-close {
             position: absolute;
             top: 8px;
             right: 8px;
             width: 20px;
             height: 20px;
             border-radius: 50%;
             background: rgba(0, 0, 0, 0.1);
             display: flex;
             align-items: center;
             justify-content: center;
             color: #8e7d5b;
             font-size: 14px;
             cursor: pointer;
         }
         
         /* 动画效果 */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(15px); }
             to { opacity: 1; transform: translateY(0); }
         }
         
         .poem-card, .poet-card, .ad-banner, .ad-large {
             animation: fadeIn 0.5s ease-out;
         }
         
         /* 响应式调整 */
         @media (max-width: 360px) {
             .app-name {
                 font-size: 28px;
             }
             
             .poem-content {
                 font-size: 18px;
             }
             
             .feature-section {
                 grid-template-columns: repeat(2, 1fr);
                 gap: 10px;
             }
         }
     </style>
